<!DOCTYPE html>
<html>
<head>
<title>Users</title>
<link href="../resources/css/dashboardStyle.css" rel="stylesheet"
	type="text/css">
</head>

<body>
	<div>
		<img id="background" src="/webapp/resources/images/background.jpg"
			alt="" title="" />
	</div>

	<div id="fixed">
		<h1>Users</h1>
		<form action="searchUsers.do" method="GET">
			<input type="hidden" name="pageNumber" value="1" />
			<input type="text" name="search" value="$!{search}" />
			<input type="submit" value="Search" />
		</form>

		<form action="delete.do" method="POST" id="delete">
			<table border="1" width="90%" align="center">
				<tr>
					<th scope="col">Name</th>
					<th scope="col">Company</th>
					<th scope="col">Job Title</th>
					<th scope="col">E-mail</th>
					<th scope="col">Actions</th>
					<td scope="col">
						Select:	<label class="select" id="select_none" onclick="selectNone()" onmousemove="mousePointer('select_none')"> None </label><label class="select" id="select_all" onclick="selectAll()" onmousemove="mousePointer('select_all')"> All </label>
					</td> 
					
				</tr> 
				
				#foreach($user in $usersList)
						   
					    <tr align="center">
					        <td scope="rowgroup" id="user${user.id}" class="rows" >
					        	${user.name} ($!{user.accessType.role})
					        </td>
					        <td scope="rowgroup">
					        	$!{user.company}
					        </td>
					        <td scope="rowgroup">
					        	$!{user.jobTitle}
					        </td>
					        <td scope="rowgroup">
								${user.email}
					        </td>
					        <td scope="rowgroup">
					        	#if($user.email != $loggedUser)<a href="editUser.do?id=${user.id}" >Edit</a>#else<a href="editMyProfile.do" >EditMyProfile</a>#end
					        </td>
					        <td>
					        	<input type="checkbox" id="cbUser${user.id}" class="cbUsers" name="usersId" value="${user.id}" #if($user.email == $loggedUser)disabled=true #end onclick="userClicked('cbUser${user.id}')"	/>
					        </td>
					          
					    </tr>
				#end
			</table>
		</form>
		
		#foreach($page in $pagesList)
			#if(${page} == ${page2Display})
				${page}
			#else
				<a href="searchUsers.do?pageNumber=${page}&search=$!{search}" >${page}</a>
			#end
		#end
		  
		<br/>
		<br/>
		
		<button id="delButton" onclick="confirmPost()">Delete selected</button>
		
		<br/>
		
		</br>
		
		<ul id="navi">
			<li><a href="create.do">Create a new user</a></li>
			<li><a href="main.do">Go to home</a></li>
		</ul>

	</div>
	
			<script type="text/javascript">
				var checkedUsers = 0;
				
				function confirmPost(){
					if(checkedUsers==0){
						alert('There are no users selected');
					} else {
						var agree = confirm("Yo are about to delete "+checkedUsers+" users.");
						if(agree){
							document.forms["delete"].submit();
						}
					}
				}
				
				function userClicked(id){
					var user = document.getElementById(id);
					if(user.checked){
						checkedUsers = checkedUsers+1;
					}else{
						checkedUsers = checkedUsers-1;
					}
				}
				
				function select(){
 					var select = document.getElementsByClassName("select");
					for(var i=0; i<select.length; i++){
						var str = select[i].innerHTML;
						var newStr = str.replace("<b>","");
						newStr = newStr.replace("</b>","");
						select[i].innerHTML=newStr;
					}
				}
				
				function selectAll(){
					select();
					document.getElementById("select_all").innerHTML="<b>All</b>";
					var users = document.getElementsByClassName("cbUsers");
					for(var i=0; i<users.length; i++){
						if(!users[i].disabled && !users[i].checked){
							users[i].checked=true;
							checkedUsers = checkedUsers+1;
						}
					}
				}
				
				function selectNone(){
					select();
					document.getElementById("select_none").innerHTML="<b>None</b>";
					var users = document.getElementsByClassName("cbUsers");
					for(var i=0; i<users.length; i++){
						if(!users[i].disabled && users[i].checked){
							users[i].checked=false;
							checkedUsers = checkedUsers-1;
						}
					}
				}
				
				function mousePointer(id){
					var el = document.getElementById(id);
					el.style.cursor="pointer";
				}
				
			</script>
</body>
</html>